<template>
  <div class="all-page">
    <div v-if="isNull">
      <div class="page" :style="backgroundDiv">
        <h2>暂 无 数 据</h2>
    </div>
    </div>
    <div v-if="!isNull && done">
      <el-card class="question" v-for="(item, index) in detail" :key="index">
      <span class="number">{{ index + 1 + "." + item.title }}</span>
      <!--如果数据库中的问题类型为单项选择或者多项选择-->
      <!--则将数据库中的数据以表格、柱状图、饼状图、圆环图、条形图的方式进行展示-->
      <div v-if="item.type == 'single' || item.type == 'multi'">
        <div class="table_title">
          <h3>选项数据统计</h3>
        </div>
        <el-table
          size="small"
          :data="item.result"
          style="width:100%"
          stripe
          class="table"
        >
          <el-table-column prop="option" label="选项"></el-table-column>
          <el-table-column
            prop="count"
            label="数量"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="percent"
            label="占比"
            width="180"
          ></el-table-column>
        </el-table>
        <div class="text">
            <div>填写率: {{ item.filling_rate }}</div>
          </div>
        <br />

        <div class="detail">
          <vote-charts :datalist="gochoice_c(item)"></vote-charts>
          <!-- <div :v-show="!show">
            <span>暂无数据</span>
          </div> -->
        </div>
      </div>
    </el-card>
    </div>
  </div>
</template>

<script>
// import column from "@/components/Analysis/charts/column";
// import sector from "@/components/Analysis/charts/sector";
import axios from "axios";
import VoteCharts from '../charts/VoteCharts.vue';
export default {
  components: {VoteCharts },
  props:{
   
    id:Number
  },
  created: function() {
    console.log(this.id)
    axios
      .post("statistic/", { "qid": this.id})
      .then((res) => {
        if (res.data.code === 0) {
          this.detail = res.data.statistics.question_infos;
          console.log(this.detail)
        }
        else if (res.data.code === 404){
          // console.log(this.isNull)
          this.isNull=true
        }
        this.done = true
      });
  },
  data() {
    return {
      show:true,
      datail: [],
      isNull:false,
      done: false,
      // datalist: {
      //   a: ["a", 1, "25"],
      //   b: ["b", 3, "25%"],
      //   c: ["c", 4, "25%"],
      //   d: ["d", 5, "25%"],
      // },
      // iscolumn: false,
      // issector: false,

      saveData: {
        percentage: 50,
      },
      backgroundDiv: {
            backgroundImage: 'url(' + require('@/assets/yx.png') + ')'
        }
      // answer
    };
  },
  methods: {
    print() {
      console.log(this.questionList);
    },
    gochoice(item) {
      console.log(item);
      let obj = item.option_count;
      let list = [];
      // let list={};
      Object.keys(obj).forEach((ele) => {
        list.push({
          value: obj[ele][1],
          name: obj[ele][0],
        });
        // this.$set(list, obj[ele][0], obj[ele][1])
      });
      return list;
    },
    gochoice_c(item) {
      console.log(item);
      let obj = item.option_count;
      let list = {};
      Object.keys(obj).forEach((ele) => {
        list[obj[ele][0]] = obj[ele][1];
        // this.$set(list, obj[ele][0], obj[ele][1])
      });
      console.log(list)
      return list;
    },
    istrue(item) {
      console.log(item);
      let obj = item.option_count;
      let list = {};
      Object.keys(obj).forEach((ele) => {
        list[obj[ele][0]] = obj[ele][2];
        // this.$set(list, obj[ele][0], obj[ele][1])
      });
      console.log(list)
      if(list[0]==='-%'){
        this.show=false
        return false
      }
      else{
        this.show=true
        return true
      }
    },
    // 当子组件改变已填写的答案时调用
    // 实时增删改问题列表中的答案
    // index: 题号
    // answer: 新的答案
    // gocolumn() {
    //   if (this.$data.iscolumn === false) {
    //     this.$data.iscolumn = true;
    //     this.$data.issector = false;
    //   }
    // },
    // gosector() {
    //   if (this.$data.issector === false) {
    //     this.$data.iscolumn = false;
    //     this.$data.issector = true;
    //   }
    // },
    // hide() {
    //   this.$data.iscolumn = false;
    //   this.$data.issector = false;
    // },
  },
};
</script>

<style scoped>
.all-page {
  width: 1000px;
  margin: 0 auto;
}
.detail {
  margin: 0 auto;
}
h3 {
  width: 350px;
  margin: 0 auto;
}
h2{
  width: 350px;
  margin-left: 200px;
  height: 50px;
  align-items: center;
}
.text {
  display: flex;
  flex-flow: row nowrap;
  margin-left: 100px;
  width: 500px;
  height: 50px;
  justify-content: space-around;
  align-items: center;
}
/* .table{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
} */
/* .charts {
  display: flex;
  justify-content: space-between;
  height: 40px;
  width: 700px;
} */
.page{
    border-radius: 8px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin: 0 auto;
  width: 1200px;
  height: 500px;
  align-items: center;
  background: no-repeat center top;
    background-size: contain;
}
</style>
